<template>
<div>
    <div class="user-list">
        <template v-if="$store.state.adminData && $store.state.adminData.role === 0">
            <div class="card-header">
                <el-button class="icon-btn delete-icon" icon="el-icon-delete" @click="handleDeleteAll">批量删除</el-button>
                <el-button class="icon-btn add-icon" icon="el-icon-circle-plus-outline" @click="dialogVisible = true; dialogType = 'add'">添加</el-button>
            </div>
        </template>

        <div class="card-table">
            <el-table
                v-if="tableData"
                :data="tableData.list"
                @selection-change="handleSelectionChange"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                stripe
                border>
                <template v-if="$store.state.adminData && $store.state.adminData.role === 0">
                    <el-table-column type="selection" min-width="50" align="center" fixed="left"></el-table-column>
                </template>
                <el-table-column type="index" min-width="50" align="center" fixed="left"></el-table-column>
                <el-table-column prop="adminName" label="管理员账号" min-width="180" align="center"></el-table-column>
                <el-table-column label="权限" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div class="tool-box">{{scope.row.role === 0 ? '超级管理员' : '管理员'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="注册时间" min-width="180" align="center">
                    <template slot-scope="scope">
                        <div class="tool-box">{{scope.row.registerTime | timerFilter()}}</div>
                    </template>
                </el-table-column>
                <template v-if="$store.state.adminData && $store.state.adminData.role === 0">
                    <el-table-column label="操作" width="180" align="center" fixed="right">
                        <template slot-scope="scope">
                            <div class="tool-box">
                                <i class="icon el-icon-edit" @click="handleUpdate(scope.row)"></i>
                                <i class="icon el-icon-delete" @click="hadnleDeleteOne(scope.row._id)"></i>
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>

        <el-pagination
            v-if="tableData"
            @current-change="currentChange"
            :current-page="tableData.pageNum"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="tableData.total">
        </el-pagination>
    </div>

    <el-dialog
        title="上传视频"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="600px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="管理员名称" prop="adminName">
                <el-input v-model="ruleForm.adminName"></el-input>
            </el-form-item>

            <el-form-item label="管理员密码" prop="adminPassword">
                <el-input type="password" v-model="ruleForm.adminPassword"></el-input>
            </el-form-item>

            <el-form-item label="管理员权限" prop="role">
                <el-radio-group v-model="ruleForm.role">
                    <el-radio :label="0">超级管理员</el-radio>
                    <el-radio :label="1">管理员</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>

</div>
</template>

<script>
export default {
    props: ['page'],

    data () {
        return {
            loading: true,
            tableData: null,
            adminParams: {
                page: this.page
            },
            multipleSelection: [],
            dialogVisible: false,
            dialogType: 'add',
            ruleForm: {
                adminName: '',
                adminPassword: '',
                role: 1
            },
            rules: {
                adminName: [
                    { required: true, message: '请输入管理员名称', trigger: 'blur' }
                ],
                adminPassword: [
                    { required: true, message: '请输入管理员密码', trigger: 'blur' }
                ],
                role: [
                    { required: true, message: '请选择管理员权限', trigger: 'change' }
                ]
            }
        }
    },

    mounted () {
        this.getAdminList()
    },

    methods: {
        // 获取管理员列表
        getAdminList () {
            this.loading = true
            this.$store.dispatch('getAdminList', this.adminParams).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data
                } else {
                    this.tableData = null
                }
                this.loading = false
            })
        },

        submitForm () {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.ruleForm))
                    if (this.dialogType === 'add') {
                        this.$store.dispatch('addAdminList', params).then(res => {
                            if (res.code === 200) {
                                this.dialogVisible = false
                                this.$message({ type: 'success', message: res.msg })
                                this.getAdminList()
                            } else {
                                this.$message({ type: 'error', message: res.msg })
                            }
                        })
                    } else {
                        this.$store.dispatch('updateAdminList', params).then(res => {
                            if (res.code === 200) {
                                this.dialogVisible = false
                                this.$message({ type: 'success', message: res.msg })
                                this.getAdminList()
                            } else {
                                this.$message({ type: 'error', message: res.msg })
                            }
                        })
                    }
                } else {
                    return false
                }
            })
        },

        // 修改管理员
        handleUpdate (row) {
            this.dialogType = 'update'
            this.ruleForm._id = row._id
            this.ruleForm.adminName = row.adminName
            this.ruleForm.adminPassword = row.adminPassword
            this.ruleForm.role = row.role
            this.dialogVisible = true
        },

        // 批量删除多选数组
        handleSelectionChange (val) {
            this.multipleSelection = val
        },

        // delete all
        handleDeleteAll () {
            if (this.multipleSelection.length === 0) {
                this.$message({ type: 'warning', message: '请至少选择一个！' })
            } else {
                let list = []
                for (let i in this.multipleSelection) {
                    list.push(this.multipleSelection[i]._id)
                }
                this.hadnleDeleteOne(list.join(','))
            }
        },

        // delete
        hadnleDeleteOne (ids) {
            let tip = '此操作将永久删除该管理员, 是否继续?'
            if (typeof (ids) === 'string') {
                tip = '此操作将永久删除所选管理员, 是否继续?'
            }
            this.$confirm(tip, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('delAdminList', { ids: ids }).then(res => {
                    if (res.code === 200) {
                        this.getAdminList()
                        this.$message({ type: 'success', message: res.msg })
                    } else {
                        this.$message({ type: 'error', message: res.msg })
                    }
                })
            }).catch(() => {
                this.$message({ type: 'info', message: '已取消删除' })
            })
        },

        // 分页
        currentChange (page) {
            this.$router.push({ params: { page: page } })
        }
    },

    watch: {
        $route: function (to, from) {
            this.adminParams.page = to.params.page
            this.getAdminList()
        },

        dialogVisible: function (val) {
            if (!val) {
                this.$refs['ruleForm'].resetFields()
                this.dialogType = 'add'
                this.ruleForm = {
                    adminName: '',
                    adminPassword: '',
                    role: 1
                }
            }
        }
    }
}
</script>

<style lang="scss">
.user-list {
    background: #fff;
    .card-header {
        height: 42px;
        font-size: 14px;
        color: #333;
        border-bottom: 1px solid #f6f6f6;
        line-height: 42px;
        padding: 10px 15px;
        .icon-btn {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
            border: none;
            color: #fff;
        }
        .delete-icon {
            background: #FF5722;
        }
        .add-icon {
            background: #009688;
        }
    }
    .card-table {
        padding: 15px;
        .icon {
            cursor: pointer;
        }
    }
}
</style>
